<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div>&nbsp;</div>

<form class="layui-form" action="" lay-filter="edit-auth-form">
    <div class="layui-form-item">
        <label class="layui-form-label">代理名称</label>
        <div class="layui-input-block">
            <input type="text" name="proxy_name" lay-verify="required" autocomplete="off" placeholder="请输入代理名称"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">代理类型</label>
        <div class="layui-input-block">
            <select name="proxy_type" lay-verify="required" lay-filter="proxy-type" lay-search="">
                <option value="">选择或搜索</option>
                <option value="http">HTTP</option>
                <!--option value="https">HTTPS</option-->
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
                <option value="stcp">STCP</option>
                <option value="xtcp">XTCP</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">远程端口</label>
        <div class="layui-input-block">
            <input type="text" name="remote_port" lay-verify="required|number" placeholder="请输入远程端口" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">有效期</label>
        <div class="layui-input-block">
            <input type="text" name="auth_valid_to" lay-verify="required|date" placeholder="yyyy-MM-dd"
                   placeholder="请选择有效期"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="memo" lay-verify="required" placeholder="请输入代理的有效描述" placeholder="请输入备注"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="post-auth">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {

        var submitFunc;
        if (!!window.location.hash) {
            var id = window.location.hash.substr(1);
            fetch("/get-auth/" + id).then(value => value.json(), reason => layer.msg(reason)).then(value => {
                value.auth_valid_to = (function (timestamp) {
                    var date = new Date(timestamp);
                    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                })(value.auth_valid_to);
                form.val('edit-auth-form', value);
                document.querySelector('[name="proxy_name"]').setAttribute("disabled", "disabled")
                document.querySelector('[name="proxy_type"]').setAttribute("disabled", "disabled")
                document.querySelector('[name="remote_port"]').setAttribute("disabled", "disabled")
                form.render("select")
            })
            submitFunc = function (submitData) {
                submitData.id = id;
                fetch("/update-auth", {
                    method: 'POST'
                    , body: JSON.stringify(submitData)
                    , headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                }).then(value => value.json(), reason => layer.msg(reason))
                    .then(value => {
                        if (value.status == 0) {
                            parent.layui.table.reload('auth-table', {}, 'data')
                        } else {
                            parent.layui.layer.msg("请稍后再试...")
                        }
                        parent.layui.layer.closeAll()
                    })
            }
        } else {
            submitFunc = function (submitData) {
                fetch("/add-auth", {
                    method: 'POST'
                    , body: JSON.stringify(submitData)
                    , headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                }).then(value => value.json(), reason => layer.msg(reason))
                    .then(value => {
                        if (value.status == 0) {
                            parent.layui.table.reload('auth-table', {}, 'data')
                        } else {
                            parent.layui.msg("请稍后再试...")
                        }
                        parent.layui.layer.closeAll()
                    })
            }
        }

        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '[name="auth_valid_to"]'
            , trigger: 'click'
        });

        form.on("select(proxy-type)", function (data) {
            if (data.value == "http" || data.value == "https" || data.value == "stcp" || data.value == "xtcp") {
                document.querySelector('[name="remote_port"]').value = "0";
                document.querySelector('[name="remote_port"]').setAttribute("disabled", "disabled")
            } else {
                document.querySelector('[name="remote_port"]').value = "";
                document.querySelector('[name="remote_port"]').removeAttribute("disabled")
            }
        })

        //监听提交
        form.on('submit(post-auth)', function (data) {
            var submitData = {};
            for (var k in data.field) {
                if (k === "auth_valid_to") {
                    submitData[k] = new Date(data.field[k]).getTime();
                } else if (k === "remote_port") {
                    submitData[k] = new Number(data.field[k]);
                } else {
                    submitData[k] = data.field[k];
                }
            }
            submitFunc(submitData);
            return false;
        });

    });
</script>

</body>
</html>